<template>
    
    <div class="home">
        <!-- 顶部 搜索框-->
        <div style="position: sticky;left: 0; top: 0; z-index: 99;">
        <van-search  
        shape="round" 
        background="red" 
        placeholder="请输入搜索关键词"
        @click-input= "this.$router.push({path:'/search'})"
        show-action
        >
        <template #left>
            <van-icon name="fire" size="30" style="margin-right: 12px;"/>
        </template>
        <template #action>
            <div @click="$router.push('/mine')"  v-if="userLogin"  style="color: aliceblue; width: 30px;height: 30px;" >
                <img src="../../../public/dog.jpg" alt="" style="width: 100%; height: 100%;border-radius: 50%;">
            </div>
            <div @click="onClickButton" v-else style="color: aliceblue;width: 30px;height: 30px;">登录</div>
        </template>
        </van-search>
        </div>
        <!--轮播图-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="banner in banners" :key="banner.id">
                    <img :src="banner.image" style="width: 100%; height: 100%;" />
                </div>
            </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
        <!-- <swiper
            最新版vue-swiper 建议不要使用,会变得不幸
            :autoplay="{ delay: 2000, disableOnInteraction: false }"
            :modules="modules"
            :slides-per-view="1"
            :effect="'cube'"
            :cubeEffect="{
                shadow: true,
                slideShadows: true,
                shadowOffset: 20,
                shadowScale: 0.94,
            }"
            :pagination="{ clickable: true }"
            :effectCube="{ slideShadows: true, shadow: true, shadowOffset: 20, shadowScale: 0.94 }"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            style="margin-bottom: 20px;"
        > 
            <swiper-slide v-for="banner in banners" :key="image"  v-slot="{ isDuplicate }">
                <img :src="banner.image"  alt=""  style="width: 100%; height: 150px;" />
            </swiper-slide>
            
        </swiper> -->

        <!-- 专题按钮宫格布局结构 -->
        <van-grid :column-num="5" v-for="n in 2">
            <van-grid-item
                v-for="item in grids"
                :key="item.path"
                :icon="item.icon"
                :text="item.title"
                :to="item.path"
            />
        </van-grid>
        <!-- 秒杀倒计时 -->
        <div class="second-kill" >
            <div class="title">
                <span style="font-weight: 900;">淘乐秒杀</span>
                <div style="font-size: 40px; color: red;"><van-icon name="hot" /></div>
                <div style="font-size: 13px; font-weight: 800;">{{ currPeriod }}:00场</div>
                <!-- 显示倒计时时间 -->
                <van-count-down :time="time">
                <template #default="timeData">
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                </template>
                </van-count-down>
            </div>
            <div class="goods-list hide-scrollbar">
                <div
                class="goods-list-item"
                v-for="goods in secondKillGoods"
                :key="goods.id"
                >
                <img :src="goods.image" alt="">
                <span>￥{{ goods.price }}</span>
                </div>
            </div>
        </div>

        <!-- 推荐商品列表 -->
        <van-divider>猜您喜欢</van-divider>
        <!--
        利用 vant 的 List 列表组件进行渲染，该组件用两个属性变量控制触底加载更多数据。
        当列表滚动触底时, 会自动触发调用 load 事件函数.
        loading 用于控制是否当前正在加载数据中, true 表示是加载数据中.
        finished 用于控制是否所有数据加载结束, true 表示所有加载结束. 当所有数据都加载
        完毕后, 不再触发触底加载的事件 (load事件)
        -->
        <van-list
            v-model:loading="loading"
            :finished="isEnd"
            finished-text="到底啦"
            offset="500"
            @load="loadRecommendGoods"
            :immediate-check="false"
        >
        <div class="recommend">
            <div class="recommend-item"
            v-for="good in goodsList"
            :key="good.id"
            @click="$router.push('/detail?id=' + good.id)"
            >
                <img :src="good.image" alt="">
                <div class="title van-multi-ellipsis--l2">{{ good.title }}</div>
                <div class="price">
                    <span class="price-curr">￥{{ good.price }}</span>
                    <span class="price-origin">原价: {{ good.originPrice }}</span>
                </div>
            </div>
        </div>

        </van-list>
        <!-- 回到顶部 -->
        <van-back-top right="8vw" bottom="10vh"/>
    </div>
</template>

<script>
// 引入 swiper 库及样式
import Swiper from 'swiper/swiper-bundle'
import 'swiper/swiper-bundle.css'
// import { Navigation, Pagination, A11y, Autoplay,EffectCube} from 'swiper/modules';
// import { Swiper, SwiperSlide } from 'swiper/vue';
// import 'swiper/css';
// import 'swiper/css/bundle'
// import 'swiper/css/effect-cube';
// import 'swiper/css/navigation';
// import 'swiper/css/pagination';

// 导入 API 方法
import { getHomeData, getMoreGoods} from '../../api/home'
import { getSpike } from '../../api/spike'


/**
 * 定义一个辅助函数，用于获取组件中要使用到的图像资源
 */
function getImageUrl(name) {
    return new URL(`../../assets/${name}.png`, import.meta.url).href
}

export default {
    name: 'Home',
    data() {
    return {
        banners:[], //轮播图数组
        items:[],   //商品数组
        goodsList:[],  //推荐商品数组
        secondKillGoods:[],  //秒杀商品数组
        grids: [  //专题宫格数据
            {title: '优选超市', icon: getImageUrl('1'), path: '/a'},
            {title: '服饰美妆', icon: getImageUrl('2'), path: '/b'},
            {title: '数码3C', icon: getImageUrl('3'), path: '/c'},
            {title: '充值中心', icon: getImageUrl('4'), path: '/d'},
            {title: '优选会员', icon: getImageUrl('5'), path: '/e'},
        ],
        time:2*60*60*1000,  // 秒杀倒计时时间,单位为毫秒
        currPeriod: 0,  // 当前秒杀场次
        periods: [0,8,10,14,15,18,24],  //保存每天的秒杀的场次
        nextIndex:0,    //推荐商品列表分页查询时，下一页数据起始索引
        isEnd:false,   //是否所有推荐商品的数据全部查询结束
        loading:false,  //是否正在加载更多商品数据中
    }
    },
    computed:{
        //判断一下是否登录
        userLogin(){
            return this.$store.getters['user/token']
        },
    },
    methods:{
        onClickButton(){
            this.$router.push({path:'/login'})
        },
        /**
         * 计算秒杀倒计时
         */
        caclSecondKillTime(){
            //获取当前系统时间
            const currentTime = new Date()
            //获取当前时间的小时数
            const currentHour = currentTime.getHours()
            // 查找出当前小时数落在哪两个秒杀场次范围内
            // 将下一次场次的小时数在数组中的元素下标返回
            const nextIndex = this.periods.findIndex(period => period >currentHour)
            //设置当前场次的数字
            this.currPeriod = this.periods[nextIndex - 1]
            //当前系统的毫秒值
            const currMills = currentTime.getTime()
            // 修改日期时间对象中的小时分钟秒数和毫秒值，以算出下一场起始时间
            currentTime.setHours(this.periods[nextIndex])
            currentTime.setMinutes(0)
            currentTime.setSeconds(0)
            currentTime.setMilliseconds(0)
            const nextMills = currentTime.getTime()
            // 计算两个毫秒差值
            this.time = nextMills - currMills
        },
        /**
         * 触底加载更多推荐商品数据
         */
        async loadRecommendGoods(){
            //调用 api 方法查询更多
            const { list, isEnd, nextIndex } = await getMoreGoods(this.nextIndex)
            this.goodsList = [
                ...this.goodsList,
                ...list
            ]
            this.nextIndex = nextIndex
            this.isEnd = isEnd
            //将 loading 设置为 false
            this.loading = false
        }
    
    },
    async created(){
        //获取数据库中的数据
        const { banners ,items } = await getHomeData()
        //获取秒杀商品数据
        const secondKillGoods = await getSpike()
        this.secondKillGoods = secondKillGoods.list
        this.goodsList = items.list
        this.banners = [...banners]
        this.items = items
        // console.log(this.secondKillGoods);

        // 秒杀相关
        this.caclSecondKillTime()


        // // 要 new Swiper() 创建对象实例，需要使用到页面上已
        // // 渲染的 DOM 节点才能创建成功并添加轮播效果，但 created
        // // 生命周期钩子是在挂载前就被调用了，不能直接在 created()
        // // 中获取到渲染后的 DOM 节点，可调用 this.$nextTick()
        // // 将回调函数的执行进行延迟，延迟到下一次 DOM 更新结束后执行 
        this.$nextTick(() => {
            console.log('home nextTick...')
            // 创建 Swiper 对象实例
            new Swiper('.swiper-container', {
                loop: true, // 循环模式选项
                autoplay: true,
                // effect: 'fade', // 淡入淡出轮播
                effect: 'cube',
                // effect: 'flip',
                
                // 如果需要分页器
                pagination: {
                el: '.swiper-pagination',
                },
            })
        })
    },
    components: {
        // Swiper,
        // SwiperSlide,
    },
    setup() {
        // const onSwiper = (swiper) => {};
        // const onSlideChange = () => {};
        return {
            // onSwiper,
            // onSlideChange,
            // //:Autoplay="{ delay: 4000, disableOnInteraction: false }"是否自动轮播,
            // //delay为轮播间隔时间，disableOnInteraction为是否禁止用户操作后继续轮播
            // //slides-per-view：控制一次显示几张轮播图
            // //space-between： 每张轮播图之间的距离，该属性不可以和margin 属性同时使用
            // //navigation： 定义左右切换箭头
            // //pagination： 控制是否可以点击圆点指示器切换轮播
            // //scrollbar： 是否显示轮播图的滚动条， draggable设置为 true就可以拖动底部的滚动条（轮播当中，一般不怎么会使用到这个属性）
            // modules: [Navigation, Pagination, A11y, Autoplay, EffectCube],
        };
    },
}
</script>



<style lang="scss" scoped>
// 轮播图
.swiper-container {
    width: 100%;
    height: 150px;
    margin-bottom: 30px;
} 

// 秒杀倒计时
.colon {
    display: inline-block;
    margin: 0 3px;
    color: black;
}
.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: black;
}
// 秒杀商品
.second-kill {
    display: flex;
    margin-top: 15px;
    .goods-list {
        display: flex;
        width: 70%;
        overflow-x: auto;

        &-item {
        display: flex;
        flex-direction: column;
        margin-right: 10px;

        img {
            width: 100px;
            height: 100px;
        }

        span {
            color: red;
            font-size: 18px;
            font-weight: 700;
        }
        }
        .goods-list-item{
            text-align: center;
        }
    }
    .title{
    width: 30%;
    background-color: #ffeeee;
    border-radius: 10px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* 针对 WebKit 浏览器 */
}

.hide-scrollbar {
  -ms-overflow-style: none;  /* IE 和 Edge */
  scrollbar-width: none;  /* Firefox */
  overflow: -moz-scrollbars-none; /* Older Firefox browsers */
}

//推荐商品
.recommend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &-item {
        width: 46%;
        padding: 6px;

        img {
            width: 100%;
            height: 170px;
        }
        .price {
            &-curr {
                color: red;
                font-weight: 700;
                margin-right: 6px;

            }
            &-origin {
                color: lightgray;
                text-decoration: line-through;
                font-size: 12px;
            }
        }
    }
}
</style>
